<template>
    <div class="person">
        <h1>需求:当水温达到60,或水位达到80时,向服务器发请求</h1>
        <h2>当前水温: {{ temp }}</h2>
        <h2>当前水位: {{ height }}</h2>
        <button @click="changeTemp">修改水温</button>
        <button @click="changeHeight">修改水位</button>
    </div>
</template>

<script lang="ts">
export default {
    name: 'Person',
}
</script>

<script setup lang="ts">
import { reactive, ref, watch, watchEffect } from 'vue'
let temp = ref(10)
let height = ref(0)
const changeTemp = () => {
    temp.value += 10
}
const changeHeight = () => {
    height.value += 10
}

// watch实现
/*
watch([temp, height], (newValue) => {
    let [newTemp, newHeight] = newValue
    if (newTemp >= 50 || newHeight >= 80) {
        console.log("send")
    }
})
*/

// immediate:true
// 立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行
/**
 * watch对比watchEffect
 * 1,都能监听响应式数据的变化,不同的是监听数据变化的方式不同;
 * 2,watch: 要明确指出监视的数据
 * 3,watchEffect: 不用明确指出监视的数据(函数中用到哪些属性,那就监视哪些属性)
 */
watchEffect(() => {
    // 除非一开始没有任何可选的依赖
    // console.log(height.value)
    // 监听到temp变化后,height的变化不会再调用console.log
    if (temp.value >= 50 || height.value >= 80) {
        console.log("effect send")
    }
})
</script>

<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 2px;
}

li {
    font-size: 15px;
}
</style>